@page "/maps/marker-template"


@using Syncfusion.Blazor.Maps


@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample indicates the temperature of various cities of Australia in marker templates.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to place a template as a marker in the map. Any custom HTML elements can be used as a marker with help of <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker.html#Syncfusion_Blazor_Maps_MapsMarker_MarkerTemplate'>MarkerTemplate</a></code>. You can use the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeSettingsModel.html#Syncfusion_Blazor_Maps_ShapeSettingsModel_Palette'>Palette</a></code> property in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeSettingsModel.html'>MapsShapeSettings</a></code> to apply desired fill colors for the shapes.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsTitleSettings Text="Australia cities weather details">
            <MapsTitleTextStyle Size="16px"/>
        </MapsTitleSettings>
        <MapsZoomSettings Enable="false"/>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/australia.json"}' TValue="string">
                <MapsShapeSettings Autofill="true" Palette="@Palette">
                    <MapsShapeBorder Width="0.5" Color="#FFFFFF"/>
                </MapsShapeSettings>
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" DataSource="MarkerTemperatureOne" TValue="Temperatures">
                        <MarkerTemplate>
                            @{
                                var Data= context as Temperatures;
                                <div>
                                    <img class="markerTemplate" src="images/maps/weather-clear.svg" />
                                    <p>@Data.Name:@Data.Temperature°C</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@MarkerTemperatureTwo" TValue="Temperatures">
                        <MarkerTemplate>
                            @{
                                var Data= context as Temperatures;
                                <div>
                                    <img class="markerTemplate" src="images/maps/weather-clouds.svg" />
                                    <p>@Data.Name:@Data.Temperature°C</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@MarkerTemperatureThree" TValue="Temperatures">
                        <MarkerTemplate>
                            @{
                                var Data= context as Temperatures;
                                <div>
                                    <img class="markerTemplate" src="images/maps/weather-clear.svg" />
                                    <p>@Data.Name:@Data.Temperature°C</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@MarkerTemperatureFour" TValue="Temperatures">
                        <MarkerTemplate>
                            @{
                                var Data= context as Temperatures;
                                <div>
                                    <img class="markerTemplate" src="images/maps/weather-rain.svg" />
                                    <p>@Data.Name:@Data.Temperature°C</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@MarkerTemperatureFive" TValue="Temperatures">
                        <MarkerTemplate>
                            @{
                                var Data= context as Temperatures;
                                <div>
                                    <img class="markerTemplate" src="images/maps/weather-clear.svg" />
                                    <p>@Data.Name:@Data.Temperature°C</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" Height="30" Width="30" DataSource="@MarkerTemperatureSix" TValue="Temperatures">
                        <MarkerTemplate>
                            @{
                                var Data= context as Temperatures;
                                <div>
                                    <img class="markerTemplate" src="images/maps/weather-clouds.svg" />
                                    <p>@Data.Name:@Data.Temperature°C</p>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
</div>
<style>
    .markerTemplate {
        height: 30px;
        width: 30px;
        display: block;
        margin: auto;
        font-size: 14px;
    }
</style>
@code {
    public string[] Palette = new string[] { "#E2B247", "#88DB46", "#42C4E2", "#C08AF8", "#52BACC", "#F4CE2F", "#6986ED" };
    public class Temperatures {

        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
        public double Temperature { get; set; }
    };
    public List<Temperatures> MarkerTemperatureOne = new List<Temperatures> {
        new Temperatures { Name="Perth", Latitude=-31.950527, Longitude=115.860457, Temperature=31.6 }
    };
    public List<Temperatures> MarkerTemperatureTwo = new List<Temperatures> {
        new Temperatures { Name="Adelaide", Latitude=-34.928499, Longitude=138.600746, Temperature=28.5 }
    };
    public List<Temperatures> MarkerTemperatureThree = new List<Temperatures> {
        new Temperatures { Name="Townsville", Latitude=-19.2589635, Longitude=146.8169483, Temperature=31.3 }
    };
    public List<Temperatures> MarkerTemperatureFour = new List<Temperatures> {
        new Temperatures { Name="Sydney", Latitude=-33.868820, Longitude=151.209296, Temperature=26.4 }
    };
    public List<Temperatures> MarkerTemperatureFive = new List<Temperatures> {
        new Temperatures { Name="Alice Springs", Latitude=-23.698042 , Longitude=133.880747, Temperature=36.4 }
    };
    public List<Temperatures> MarkerTemperatureSix = new List<Temperatures> {
        new Temperatures { Name="Brisbane", Latitude=-27.469771 , Longitude=153.025124, Temperature=29.1 }
    };
}